<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>文件预览插件</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/vditor@3.8.17/dist/index.css" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vditor@3.8.17/dist/js/i18n/zh_CN.js"></script>
    <script src="https://unpkg.com/vditor@3.8.17/dist/method.min.js"></script>
</head>

<body>
	<div class="main-body" style="margin:0 auto;width:900px">
		<h2>立即体验</h2>
		<div id="el-app" style="display:flex;flex-flow: wrap;">
			<div v-for="x in list" style="margin-right: 10px;margin-bottom: 10px;">
				<el-button round @click="preview(x.src)">${x.name}</el-button>
			</div>
		</div>
		<div class="vditor-reset" id="preview">
			<h4>介绍</h4>
			<p>一款纯JQ实现的预览插件，支持office文档，图片，音乐，视频，pdf等常用的文件！部分不支持的文档采用officeOnline在线预览。</p>
			<p>支持doc、docx、ppt、pptx、wps、xls、xlsx、pdf、mp4、mp3、jpg、png等常用的文件。</p>
			<p>体验地址：<a href="https://view.raingad.com">https://view.raingad.com</a></p>
			<p>体验链接</p>
			<pre><code class="language-html">https://view.raingad.com/preview.html?src=你的文件地址</code></pre>
			<p>其他文件支持持续更新中...</p>
			<h4>软件架构</h4>
			<pre><code class="language-html">jpreview/
├─source         # 预览资源库，使用时只需要使用static文件内的内容即可
├─static         # 静态资源库
│  └─jPreview.js # 核心文件
├─index.html     # demo
└─preview.html   # 实现预览的页面
			</code></pre>
			<h4>使用说明</h4>
			<ol>
			<li>引入Jquery，和主文件</li>
			</ol>
			<pre><code class="language-html">&lt;!-- css --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;static/common/css/main.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;static/common/css/audio.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;static/luckysheet/css/pluginsCss.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;static/luckysheet/css/plugins.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;static/luckysheet/css/luckysheet.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;static/luckysheet/css/iconfont.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;static/pptxjs/css/pptxjs.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;static/viewer/viewer.css&quot;&gt;

&lt;!-- js --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;static/common/js/jquery-2.0.3.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;static/common/js/jPreview.js&quot;&gt;&lt;/script&gt;
			</code></pre>
			<ol start="2">
			<li>初始化</li>
			</ol>
			<pre><code class="language-javascript">jPreview.preview({
	container:&quot;container&quot;, // 容器id
	staticPath:&quot;./static&quot;, // 静态资源路径
	url:&quot;&quot;, // 预览资源路径，没有的话获取url中scr参数
	ext:&quot;&quot;,  // 资源后缀，如果url中没有的话，必须传入后缀名，否则无法识别文件类型
	name:&quot;&quot;,  // 资源名称
	watermarkTxt:&quot;文件预览系统&quot;, // 水印文字
	watermarkSize:&quot;&quot;, // 水印文字大小
	priority:1, // 优先级 1：使用插件预览 2：使用office在线预览，
	oburl:&quot;&quot;, // 可自动设置在线设置office线上预览地址，不需要的话可以不传
});
			</code></pre>
			<ol start="3">
			<li>将静态资源放入到你需要的地方，并在初始化的时候，把相对路径填入 <code>staticPath</code>中。</li>
			<li>pdf预览插件是采用的mjs，需要在服务端中运行，并且在服务端设置MIME类型，以下是nginx的配置方法，不明白的可以百度。</li>
			</ol>
			<pre><code class="language-javascript">http {
	...
	types {
		application/javascript mjs;
	}
	...
}
			</code></pre>
			<h4>开源库</h4>
			<ol>
			<li><code>docx-preview</code> docx文档</li>
			<li><code>pptxjs</code> pptx演示文稿</li>
			<li><code>luckysheet</code> excel表格</li>
			<li><code>sheetjs</code> excel表格，支持xls</li>
			<li><code>superVideo</code> 视频播放器</li>
			<li><code>yAudio</code> 音频播放器</li>
			<li><code>watermark</code> 水印</li>
			<li><code>viewer.js</code> 图片预览</li>
			<li><code>pdf.js</code> pdf预览</li>
			</ol>
			<h4>已知bug</h4>
			<p>pdf文档暂时不支持中文路径</p>
		</div>
	</div>
    <script>
        const previewElement = document.getElementById('preview')
        Vditor.setContentTheme('light', 'https://unpkg.com/vditor@3.8.17/dist/css/content-theme');
        Vditor.codeRender(previewElement);
        Vditor.highlightRender({ "enable": true, "lineNumber": false, "style": "github" }, previewElement, 'https://unpkg.com/vditor@3.8.17');
        Vditor.mathRender(previewElement, {
            cdn: 'https://unpkg.com/vditor@3.8.17',
            math: { "engine": "KaTeX", "inlineDigit": false, "macros": {} },
        });
        Vditor.mermaidRender(previewElement, 'https://unpkg.com/vditor@3.8.17', 'classic');
        Vditor.flowchartRender(previewElement, 'https://unpkg.com/vditor@3.8.17');
        Vditor.graphvizRender(previewElement, 'https://unpkg.com/vditor@3.8.17');
        Vditor.chartRender(previewElement, 'https://unpkg.com/vditor@3.8.17', 'classic');
        Vditor.mindmapRender(previewElement, 'https://unpkg.com/vditor@3.8.17', 'classic');
        Vditor.abcRender(previewElement, 'https://unpkg.com/vditor@3.8.17');
        Vditor.mediaRender(previewElement);
        Vditor.speechRender(previewElement);
    </script>
    <script src="https://unpkg.com/vditor@3.8.17/dist/js/icons/ant.js"></script>
</body>
<script type="text/javascript" src="static/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="https://www.layuicdn.com/layer-v3.5.1/layer.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
<script>
	var app = new Vue({
		delimiters: ['${', '}'],
		el: '#el-app',
		data(){
			return {
				loading: true,
				list:[
					{
						name:'图片',
						src:'https://lvzhe-project-file.oss-cn-beijing.aliyuncs.com/project856/5c389cbe8cb30.jpg',
					},
					{
						name:'pdf',
						src:'https://emoji.raingad.com/file/1.pdf',
					},
					{
						name:'音频',
						src:'https://emoji.raingad.com/file/风居住的街道.mp3',
					},
					{
						name:'视频',
						src:'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Winston_Recall.mp4',
					},
					{
						name:'电子表格',
						src:'https://emoji.raingad.com/file/7.xlsx',
					},
					{
						name:'word文档',
						src:'https://emoji.raingad.com/file/6.docx',
					},
					{
						name:'演示文稿',
						src:'https://emoji.raingad.com/file/5.pptx',
					}
				]
			};
		},
		created(){
		},
		methods:{
			preview(url){
				layer.open({
					type: 2,
					title:'文件预览',
					area: ['100%', '100%'],
					content: 'preview.html?src='+url,
					maxmin: true,
					offset: 't',
					shadeClose: true,
				});
			}
		}
	})
	</script>
</html>
<style>
	@media (max-width: 900px) {
		.main-body {
			width: 100% !important;
		}
	}
</style>